<template>
    <div class="white-box">
        <div class="task-one">
            <div class="task-one__item">
                <span class="task-one__label">订单编号：</span>
                <el-input placeholder="输入订单编号" v-model.trim="order_sn" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">员工ID：</span>
                <el-input placeholder="输入员工ID" v-model.trim="staff_id" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">操作来源：</span>
                <el-select v-model="froms" clearable placeholder="请选择操作来源">
                    <el-option label="员工" value="staff" />
                    <el-option label="管理员" value="admin" />
                </el-select>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">日期筛选：</span>
                <el-date-picker v-model="area_time" type="date" value-format="YYYY-MM-DD" :disabled-date="disabledDate"
                    placeholder="请选择日期" />
            </div>
            <div class="task-one__btn task-wrap-btn clearfix">
                <el-button type="primary" :loading="search_btn" :icon="Search" @click="handleSearch">搜索</el-button>
                <el-button type="default" @click="downExcel">导出</el-button>
            </div>
        </div>

        <el-table class="table-mb" v-loading="loading" :data="arr_data" :header-cell-style="{ background: '#F5F7FA' }"
            element-loading-background="rgba(255, 255, 255, 0.6)">
            <el-table-column label="订单编号" prop="order_sn" width="130"></el-table-column>
            <el-table-column label="商品信息" min-width="300">
                <template #default="{ row }">
                    <div class="table-lr">
                        <el-image class="table-lr__img" loading="lazy" :src="proxy.imgUrl + row.product_img + '!img_400'"
                            fit="cover" v-if="row.product_img" />
                        <div class="table-lr__right" :style="{ marginLeft: row.product_img ? '10px' : '0' }">
                            <p class="lr-user" style="margin-bottom:0">{{ row.product_name }}</p>
                            <p class="lr-text">等级：{{ row.level }}，
                                颜色：{{ row.color }}，规格：{{ row.norm }}/{{ row.unit }}
                            </p>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作来源" prop="from_name" min-width="140">
                <template #default="{ row }">
                    <p>{{ row.from_name }}[ID:{{ row.creator_id }}]</p>
                </template>
            </el-table-column>
            <!-- <el-table-column label="操作类型" prop="type_name" min-width="120"></el-table-column> -->
            <el-table-column label="备注" prop="note" min-width="200"></el-table-column>
            <el-table-column prop="created_at_label" label="日期" width="160" />
        </el-table>
        <!-- 分页 -->
        <el-pagination background v-model:current-page="page" v-model:page-size="pageSize" :page-sizes="pageSizeNum"
            :total="totalNums" layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
    </div>
    <go-back />
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, watch } from "vue"
import { Search } from "@element-plus/icons-vue"
import OneLoad from "@mixins/one-load"
import GoBack from "@components/GoBack.vue"

const { proxy } = getCurrentInstance()

onMounted(() => {
    getList()
})

// 筛选
const area_time = ref("")
const staff_id = ref("")
const order_sn = ref("")
const froms = ref("")
const handleSearch = () => {
    search_btn.value = true
    pubRefreshParams(getList)
}

/**
 * minxin列表加载
 */
const { page, pageSizeNum, pageSize, loading, arr_data, totalNums, search_btn, pubParams, pubRefreshParams, getdata } = OneLoad()

// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1
    pageSize.value = val
    pubParams(getList)
})
// 跳转第几页
watch(page, (val) => {
    page.value = val
    pubParams(getList)
})

function getList() {
    let day = area_time.value ? area_time.value.replace(/-/g, "") : ''
    let params = {
        page: page.value,
        limit: pageSize.value,
        day,
        staff_id: staff_id.value,
        order_sn: order_sn.value,
        from: froms.value,
    }
    getdata("storage/release/log", params)
}

// 导出
const downExcel = () => {
    proxy.$axios
        .get("", {
            params: {
                area_time: area_time.value,
                user_name: user_name.value,
                user_id: user_id.value,
            },
            responseType: "blob",
        })
        .then(function (res) {
            let contentDisposition = res.headers["content-disposition"]
            let filename = decodeURI(contentDisposition.split("fileName=")[1] || contentDisposition.split("filename=")[1])
            let blob = new Blob([res.data], { type: res.headers["content-type"] })
            const url = window.URL.createObjectURL(blob)
            const link = document.createElement("a")
            link.href = url
            link.download = filename
            document.body.appendChild(link)
            link.click()
            URL.revokeObjectURL(url) // 释放内存
            document.body.removeChild(link)
        })
        .catch((err) => { })
}

const disabledDate = (time) => {
    return time.getTime() > Date.now()
}
</script>
<script>
export default {
    name: "SeatCount",
}
</script>

<style lang="less" scoped>
.table-lr__img {
    width: 40px !important;
    height: 40px !important;
}

.table-lr__right {
    min-height: 40px !important;
}
</style>
